<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="referrer" content="no-referrer">
	<title>Document</title>
</head>
<style type="text/css">
    body{
        margin: 0;
        padding: 0px;
    }
    #carousel{
        margin: auto; 
        width: 600px; 
        position: relative;
        overflow: hidden; 
    }
    #carousel img{
        width: 600px; 
    }
    #carousel > ul {
        display: flex; 
        position: absolute; 
    }
    #carousel > ul,
    #carousel > ul > li{
        padding: 0;
        margin: 0;
        list-style:none; 
    }
</style>
<body>
    <!-- 轮播图 -->
    <div id="carousel">
        <ul> 
            <li>
                <img src="https://t9.baidu.com/it/u=865180044,3526254683&fm=193">
            </li>
            <li>
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3273903337,484472162&fm=11&gp=0.jpg">
            </li>
            <li>
                <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3253160757,2308981080&fm=26&gp=0.jpg">
            </li>
            <li>
                <img src="https://t9.baidu.com/it/u=4210315996,3941006054&fm=193">
            </li>
        </ul>
    </div>
</body>
    <script type="text/javascript">
        var imgArr = []; 
        var curIndex = 0; 
        var timer = null; 
        
        function slide(slideContainer){
            var width = imgArr[curIndex].width; 
			var distanceMoved = 0; 
            var step = 10; 
            var curConLeft = slideContainer.offsetLeft; 
            var slideInterval = setInterval(function (){ 
                if(Math.abs(width - distanceMoved) > step){ 
                    curConLeft -= step; 
                    slideContainer.style.left = `${curConLeft}px`; // 移动
                    distanceMoved += step; 
                }else{ 
                    clearInterval(slideInterval); 
                    slideContainer.style.left = `${curConLeft - width + distanceMoved }px`; 
                    distanceMoved = 0; 
                    if(++curIndex === imgArr.length){ 
                        curIndex = 0; 
                        slideContainer.style.left = 0; 
                    }
                }
            }, 10);
        }

        (function start() {
            var config = {
                height: "300px", 
                interval: 3000 
            }
            document.getElementById("carousel").style.height = config.height; 
            document.querySelectorAll("#carousel img").forEach(v => imgArr.push(v));
            var slideContainer = document.querySelector("#carousel > ul"); 
            var li = document.createElement("li"); 
            var img = document.createElement("img"); 
            img.src = imgArr[0].src; 
            li.appendChild(img); 
            slideContainer.appendChild(li); 
            timer = setInterval(() => {slide(slideContainer)},config.interval); 
        })();
    </script>
</html>